<style lang="less">
    @import "home.less";
</style>
<template>
    <div id="containerMap1">
        <div id="container" ></div>
        左百年
        <div  id="leftDiv">
                <Card dis-hover padding="16" bordered="false" id="leftTop">
                    <p slot="title" class="cardTitle" style="color: #00a0e9">河长信息</p>
                    <Button size="large" type="warning" long shape="circle" ><span class="bSpan">所有巡河人数 : {{peopleAll}}</span></Button>
                    <br><br>
                    <Button size="large" type="success" long shape="circle"><span class="bSpan">当前巡河人数 : {{nowPeopleAll}}</span></Button>
                </Card>
            <!--间隔-->
            <card id="left0Top"></card>
            <Card dis-hover padding="16" bordered="false" id="left2Top">
                <p slot="title" class="cardTitle2" style="color: #00a0e9">待办事件</p>
                <div class="divcss5" >代办提醒(<span style="color: #FF6633;font-size: large" >{{dbtotal}}</span>件)
                    <Button type="primary" @click="modal1 = true" size="small" style="float: right" >详细</Button>
                    <!--<Button  type="primary" size="small" style="float: right; @click="modal1 = true">详细</Button>-->
                    <Modal
                            width="1200"
                            v-model="modal1"
                            title="待办事件"
                            @on-ok="ok"
                            @on-cancel="cancel">
                        <Table
                                :border="showBorder"
                                :stripe="showStripe"
                                :show-header="showHeader1"
                                :height="fixedHeader ? 250 : ''"
                                :data="dbdata"
                                :columns="xxdbcolumns"
                                size="small">
                                <!--:loading="loading"-->
                                <!---->
                                <!--:columns="xxdbcolumns"-->
                                <!--sortable="custom"-->
                                <!--:data="xxdbdata"-->
                                <!--size="small">-->
                                <!--border-->
                                <!--@on-sort-change="changeSort"-->
                                <!--@on-selection-change="showSelect"-->
                                <!--ref="table"-->
                        </Table>
                    </Modal>
                </div>
                <Table :border="showBorder"
                       :stripe="showStripe"
                       :show-header="showHeader"
                       :height="fixedHeader ? 250 : ''"
                       :data="dbdata"
                       :columns="dbColumns"
                       size="small"
                >
                </Table>
                <div class="divcss5" >会议及任务通知(<span style="color: #FF6633;font-size: large" >{{number}}</span>件)<Button  type="info" size="small" style="float: right;">详细</Button></div>
                <table border="0"><tr><td><div class="table" >河长办</div></td>
                    <td><div class="table1" ></div></td><td><div class="table2" >河长制督查</div></td>
                    <td><div class="table3"></div></td><td><p style="color: #00a0e9">办理</p></td></tr></table>
            </Card>
            <!--间隔-->
            <card id="left00Top"></card>
            <Card dis-hover padding="16" bordered="false" id="left3Top">
                <p slot="title" class="cardTitle2" style="color: #00a0e9">未按期完成巡河任务村</p>
                <!-- ECharts图表测试 -->
                <div id="myChart" :style="{width: '230px', height: '120px'}"></div>
            </Card>
        </div>
        <!--右列-->
        <div id="rightDiv">
            <Card dis-hover padding="16" bordered="false" id="rightTop">
                <p slot="title" class="cardTitle">巡查报告 <Button  type="error" size="small" vertical-align="middle">查看更多</Button></p>
                <Table size="small" :columns="columns1" :data="data1"></Table>
            </Card>
            <!--间隔-->
            <card id="right0Top"></card>
            <Card dis-hover padding="16" bordered="false" id="right2Top">
                <p slot="title" class="cardTitle2" style="color: #00a0e9">事件统计</p>
                <p style="font-size: smaller">截至今日,共接收问题<span style="color: #FF6633;font-size: large" >{{sjAll}}</span>件,处理<span style="color: #FF6633;font-size: large" >{{yAll}}</span>件.</p>
                <!-- ECharts图表测试 -->
                <div id="myChart2" :style="{width: '240px', height: '90px'}"></div>
            </Card>
            <!--间隔-->
            <card id="right00Top"></card>
            <Card dis-hover padding="16" bordered="false" id="right3Top">
                <p slot="title" class="cardTitle2" style="color: #00a0e9">巡查统计</p>
                <p style="font-size: smaller">巡河共<span style="color: #FF6633;font-size: large" >{{xcAll}}</span>次,
                    共巡河<span style="color: #FF6633;font-size: large" >{{xhAll}}</span>公里</p>
                <div id="myChart3" :style="{width: '230px', height: '120px'}"></div>
            </Card>
        </div>
        <Spin size="large" fix v-if="spinShow" style="z-index: 999;"></Spin>
    </div>

</template>


<script>
    import {
        todoList
    } from "@/api/activiti";
    import MapLoader from '@/plugins/amap.js';
    import {
        getCgqimg,
        getCloseimg,
        getJkimg,
        getPathArray,
        getSharpimg,
        getXhrimg
    } from '@/plugins/mapPoint.js';
    export default {

        name: "home",
        data() {
            return {
                peopleAll:"0",
                nowPeopleAll:"0",
                sjAll:"0",
                yAll:"0",
                map:null,
                spinShow:true,
                time:"",
                xcAll:"",
                xhAll:"",
                xcCharts:[],
                peopleData:[],
                equipmentsData:[],
                //代办件数
                number:"3",
                searchForm: {
                    pageNumber: 1, // 当前页数
                    pageSize: 2 // 页面大小
                },
                //获取饼状图
                sjEcharts:[],
                dbdata:[],
                xxdbdata:[],
                showBorder: false,
                showStripe: false,
                showHeader: false,
                showHeader1: true,
                modal1: false,
                dbtotal:0,
                //巡查报告
                columns1: [
                    {
                        title: '序号',
                        width: 70,
                        key: 'name'
                    },
                    {
                        title: '行政区划',
                        width: 89,
                        key: 'age'
                    },
                    {
                        title: '完成率',
                        width: 94,
                        key: 'address'
                    }
                ],
                data1:[],

                dbColumns: [


                    {
                        title: "任务名称",
                        key: "name",
                        minWidth: 90
                    },


                    {
                        title: "流程发起人",
                        key: "applyer",
                        width: 80
                    },
                    {
                        title: "状态",
                        key: "isSuspended",
                        align: "center",
                        width: 90,
                        render: (h, params) => {
                            if (!params.row.isSuspended) {
                                return h("div", [
                                    h("Badge", {
                                        props: {
                                            status: "success",
                                            text: "已激活"
                                        }
                                    })
                                ]);
                            } else if (params.row.isSuspended) {
                                return h("div", [
                                    h("Badge", {
                                        props: {
                                            status: "error",
                                            text: "已挂起"
                                        }
                                    })
                                ]);
                            }
                        },
                        filters: [
                            {
                                label: "已激活",
                                value: false
                            },
                            {
                                label: "已挂起",
                                value: true
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value) {
                                return row.isSuspended == true;
                            } else if (!value) {
                                return row.isSuspended == false;
                            }
                        }
                    },
                ],
                xxdbcolumns: [
                    // 表头
                    {
                        type: "selection",
                        width: 60,
                        align: "center"
                    },
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "任务名称",
                        key: "name",
                        minWidth: 160
                    },
                    {
                        title: "所属流程",
                        key: "processName",
                        width: 150
                    },
                    {
                        title: "委托代办人",
                        key: "owner",
                        width: 130
                    },
                    {
                        title: "流程发起人",
                        key: "applyer",
                        width: 130
                    },
                    {
                        title: "优先级",
                        key: "priority",
                        width: 100,
                        sortable: true,
                        render: (h, params) => {
                            let text = "无",
                                color = "";
                            if (params.row.priority == 0) {
                                color = "green";
                            } else if (params.row.priority == 1) {
                                color = "orange";
                            } else if (params.row.priority == 2) {
                                color = "red";
                            } else {
                                color = "default";
                            }
                            this.dictPriority.forEach(e => {
                                if (e.value == params.row.priority) {
                                    text = e.title;
                                }
                            });
                            return h("div", [
                                h(
                                    "Tag",
                                    {
                                        props: {
                                            color: color
                                        }
                                    },
                                    text
                                )
                            ]);
                        }
                    },
                    {
                        title: "状态",
                        key: "isSuspended",
                        align: "center",
                        width: 110,
                        render: (h, params) => {
                            if (!params.row.isSuspended) {
                                return h("div", [
                                    h("Badge", {
                                        props: {
                                            status: "success",
                                            text: "已激活"
                                        }
                                    })
                                ]);
                            } else if (params.row.isSuspended) {
                                return h("div", [
                                    h("Badge", {
                                        props: {
                                            status: "error",
                                            text: "已挂起"
                                        }
                                    })
                                ]);
                            }
                        },
                        filters: [
                            {
                                label: "已激活",
                                value: false
                            },
                            {
                                label: "已挂起",
                                value: true
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value) {
                                return row.isSuspended == true;
                            } else if (!value) {
                                return row.isSuspended == false;
                            }
                        }
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        width: 150,
                        sortType: "desc",
                        sortable: true
                    },
                ],
            };
        },
        methods: {
            //初始化
            init() {
                    // this.getDictDataType();
                    this.getDataList();
                let that = this;
                //未完成巡查村柱状图
                this.drawLine();
                //发现问题及整改率饼状图
                // this.getPieChart();
                //事件饼状图
                this.getsjEcharts();
                //统计巡查图表
                this.getxcCharts();
                this.getsjAll();
                this.getxcAll();
                // this.getyAll();
                this.getPeopleAll();
                this.getNowTime();
                this.getxhAll();
                MapLoader().then(AMap => {
                    that.map =new AMap.Map("container", {
                        zoom:11,
                        zooms:[11,15],
                        center:[116.70,40.16],
                        pitch: 0,
                        viewMode: '3D',
                        resizeEnable: true,
                        /*layers: [
                            // 卫星
                            new AMap.TileLayer.Satellite(),
                            // 路网
                            new AMap.TileLayer.RoadNet()
                        ],*/
                    });
                    that.getRiverPeople();
                    that.getEquipmentsData();
                    that.addPolygon();
                    that.spinShow = false;
                }, e => {
                    console.log('地图加载失败' ,e)
                })

            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            getDataList() {
                this.loading = true;
                todoList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.success) {
                        this.dbdata = res.result.content;
                        this.dbtotal = res.result.totalElements;
                    }
                });
            },

            getNowTime(){
                var date = new Date();
                this.time = date.toLocaleDateString();
            },
            //获取总巡河人数
            getPeopleAll:function(){
                let that = this;
                this.getRequest("/user/getPeopleCount").then(res => {
                    if (res.success) {
                       that.peopleAll = res.result;
                    }
                });
            },
            //获取共接收问题
            getsjAll:function(){
                let that = this;
                this.getRequest("/actTask/getSjCount").then(res => {
                    if (res.success) {
                        that.sjAll = res.result;
                    }
                });
            },
            //获取巡查次数
            getxcAll:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXcCount").then(res => {
                    if (res.success) {
                        that.xcAll = res.result;
                    }
                });
            },
            //获取巡查总公里数
            //获取巡查次数
            getxhAll:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXhCount").then(res => {
                    if (res.success) {
                        that.xhAll = res.result;
                    }
                });
            },
            //获取已处理事件
            // getyAll:function(){
            //     let that = this;
            //     this.getRequest("/actBusiness/getYCount").then(res => {
            //         if (res.success) {
            //             that.yAll = res.result;
            //         }
            //     });
            // },

            //获取设备数据
            getEquipmentsData:function(){
                let that = this;
                this.getRequest("/equipments/getAll").then(res => {
                    if (res.success) {
                        that.equipmentsData = res.result;
                        that.addMarkers();
                    }
                });
            },
            //画地图点(按群组画巡河人)
            addPeopleMarkers:function(){
                let that = this;
                let lnglats = that.peopleData;
                let total = 0;
                var markers = [];
                let xhrImg = getXhrimg();
                //巡河人图标
                var xhrIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: xhrImg,
                    imageSize: new AMap.Size(48, 48),
                });
                for (var i = 0; i < lnglats.length; i++) {
                    var lnglat = lnglats[i];
                    if(null != lnglat.user){
                        total = total+1;
                        let u = lnglat.user;
                        let title = u.username+"---"+u.departmentTitle;
                        let content = [];
                        /*content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
                        content.push("电话：010-64733333");
                        content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");*/
                        content.push("河流名称:"+lnglat.riverName +
                            "<br/>"+
                            "巡河开始时间:"+lnglat.patrolStartTime +
                            "<br/>"+
                            "起始坐标:<br/>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;经度:"+lnglat.longitude+
                            "<br/>"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;纬度:"+lnglat.dimensionality);
                        // content.push("<br/>");
                        // content.push("<a href="+lnglat.address+" target='_blank'>详细信息</a>");
                        // 创建点实例
                        let marker = new AMap.Marker({
                            title:title,
                            animation:"AMAP_ANIMATION_DROP",
                            position: new AMap.LngLat(lnglat.longitude, lnglat.dimensionality),
                            icon: xhrImg,
                            extData: {
                                id: lnglat.id
                            }
                        });
                        marker.content = this.createInfoWindow(title,content);
                        marker.on('click', that.markerClick);
                        // marker.emit('click', {target: marker});
                        markers.push(marker);
                    }
                }
                this.map.add(new AMap.OverlayGroup(markers));
                this.nowPeopleAll = total;
            },

            //画地图点(按群组画)
            addMarkers:function(){
                let that = this;
                let lnglats = that.equipmentsData;
                var markers = [];
                let cgqimg = getCgqimg();
                let jkImg = getJkimg();
                let xhrImg = getXhrimg();
                //传感器图标
                var cgqIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: cgqimg,
                    imageSize: new AMap.Size(48, 48),
                });
                //监控图标
                var jkIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: jkImg,
                    imageSize: new AMap.Size(48, 48),
                });
                //巡河人图标
                var xhrIcon = new AMap.Icon({
                    size: new AMap.Size(50, 50),
                    image: xhrImg,
                    imageSize: new AMap.Size(48, 48),
                });
                for (var i = 0; i < lnglats.length; i++) {
                    var lnglat = lnglats[i];
                    let icon;
                    if(lnglat.equipmentType == 1){
                        icon = jkIcon;
                    }else{
                        icon = cgqIcon;
                    }

                    let title = lnglat.equipmentName;
                    let content = [];
                    /*content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里");
                    content.push("电话：010-64733333");
                    content.push("<a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a>");*/
                    content.push(lnglat.bak);
                    // content.push("<br/>");
                    // content.push("<a href="+lnglat.address+" target='_blank'>详细信息</a>");
                    // 创建点实例
                    let marker = new AMap.Marker({
                        title:lnglat.equipmentName,
                        animation:"AMAP_ANIMATION_DROP",
                        position: new AMap.LngLat(lnglat.lon, lnglat.lat),
                        icon: icon,
                        extData: {
                            id: lnglat.id
                        }
                    });
                    marker.content = this.createInfoWindow(title,content);
                    marker.on('click', that.markerClick);
                    // marker.emit('click', {target: marker});
                    markers.push(marker);
                }
                this.map.add(new AMap.OverlayGroup(markers));
                // this.map.clearInfoWindow();
            },

            //标点点击事件
            markerClick:function(e) {
                var infoWindow = new AMap.InfoWindow({isCustom:true,closeWhenClickMap:true,offset: new AMap.Pixel(30, -40)});
                infoWindow.setContent(e.target.content);
                infoWindow.open(this.map, e.target.getPosition());
            },
            //构建自定义信息窗体
            createInfoWindow:function(title, content) {
                let that = this;
                var info = document.createElement("div");
                info.className = "custom-info input-card content-window-card";


                //可以通过下面的方式修改自定义窗体的宽高
                info.style.width = "300px";
                // 定义顶部标题
                var top = document.createElement("div");
                var titleD = document.createElement("div");
                var closeX = document.createElement("img");
                top.className = "info-top";
                titleD.innerHTML = title;
                titleD.onclick = that.map.clearInfoWindow( );
                closeX.src = getCloseimg();
                closeX.onclick = that.mapClearInfoWindow;
                // closeX.setAttribute("click", that.mapClearInfoWindow);

                top.appendChild(titleD);
                top.appendChild(closeX);
                info.appendChild(top);

                // 定义中部内容
                var middle = document.createElement("div");
                middle.className = "info-middle";
                middle.style.backgroundColor = 'white';
                middle.innerHTML = content;
                info.appendChild(middle);

                // 定义底部内容
                var bottom = document.createElement("div");
                bottom.className = "info-bottom";
                bottom.style.position = 'relative';
                bottom.style.top = '0px';
                bottom.style.margin = '0 auto';
                var sharp = document.createElement("img");
                sharp.src = getSharpimg();
                bottom.appendChild(sharp);
                info.appendChild(bottom);
                return info;
            },

            //关闭地图弹窗
            mapClearInfoWindow:function(){
                this.map.clearInfoWindow();
            },

            //画地图遮罩
            addPolygon:function(){
                let that = this;
                /* new AMap.DistrictSearch({
                   extensions:'all',
                   subdistrict:0
                 }).search('顺义区',function(status,result) {*/
                // 外多边形坐标数组和内多边形坐标数组
                // var outer = [
                //   new AMap.LngLat(-180,90,true),
                //   new AMap.LngLat(-180,-90,true),
                //   new AMap.LngLat(180,-90,true),
                //   new AMap.LngLat(180,90,true),
                // ];
                // var holes = result.districtList[0].boundaries
                // var pathArray = [
                //     outer
                // ];
                //顺义区地图遮罩边界
                var holes = getPathArray();
                var polygon = new AMap.Polygon( {
                    path:holes,
                    strokeColor: 'rgb(0,0,0)',
                    strokeWeight: 3,
                    strokeOpacity:1,
                    fillColor: 'rgba(255,255,255)',
                    fillOpacity: 0,
                    strokeStyle:'dashed',
                    strokeDasharray:[10,2]
                });
                // polygon.setPath(holes);
                that.map.add(polygon);
                // })
            },

            //获取巡河人员
            getRiverPeople(){
                this.loading = true;
                let url = "/river/getRiverPeople";

                this.postRequest(url,{time:this.time}).then(res => {
                    this.loading = false;
                    if (res.success) {
                        this.peopleData = res.result;
                        this.addPeopleMarkers();
                    }
                });
            },
            //清除地图所有点
            mapClearMarker:function(){
                let markers = this.map.getAllOverlays('marker')
                this.map.remove(markers);
            },

            //未完成巡查村
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    legend: {
                        itemHeight:'10',
                        data:['已完成','未完成'],
                        align: 'left',
                        textStyle:{//图例文字的样式
                            color:'#020202',
                            fontSize:'9'
                        },
                        itemWidth:12,
                        itemHeight:9,
                        x:'right',
                        bottom:'90%'
                    },
                    grid:{
                        top:'20%',//距上边距
                        bottom:'20%'
                    },
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '未完成', '已完成'],
                            ['高丽营镇', 0, 85.8],
                            ['赵全营镇', 0, 73.4],
                            ['木林镇', 0, 65.2],
                            ['龙湾屯镇', 0, 53.9]
                        ]
                    },
                    xAxis: {type: 'category',
                        axisLabel: {
                            interval:0,
                            rotate:"45",
                            textStyle:{
                                fontSize:8
                            }
                        },
                    },
                    yAxis: {},
                    series: [
                        {type: 'bar',},
                        {type: 'bar',
                            itemStyle:{
                                normal:{ color:'#31E917' }
                            }
                        },
                    ]
                });
            },
            //获取饼状图事件图表
            getsjEcharts:function(){
                let that = this;
                this.getRequest("/actTask/getSjCharts").then(res => {
                    if (res.success) {
                        that.sjEcharts = res.result;
                        this.getPieChart();
                    }
                });
            },
            //获取巡查集合
            getxcCharts:function(){
                let that = this;
                this.getRequest("/riverTourHistory/getXcCharts").then(res => {
                    if (res.success) {
                        that.xcCharts = res.result;
                        this.getxcEcharts();
                    }
                });
            },
            //发现问题及整改率饼状图
            getPieChart:function(){
                let sjEcharts = this.sjEcharts;
                let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                //绘制图表
                myChart2.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        textStyle:{//图例文字的样式
                            fontSize:'9'
                        },
                        itemWidth:12,
                        itemHeight:9,
                        padding:[0,50,0,0],
                    },

                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '70%',//设置饼图大小
                            center: ['60%', '60%'],
                            labelLine:{ //指示线的长度
                                normal:{
                                    length:5
                                }
                            },
                            data: sjEcharts,
                            label: {
                                textStyle: {
                                    fontSize:9
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            },
            //巡查统计图表
            getxcEcharts:function(){
                let xcCharts = this.xcCharts;
                let myChart3 = this.$echarts.init(document.getElementById('myChart3'))
                // 绘制图表
                myChart3.setOption({
                    grid:{
                        top:'20%',//距上边距
                        bottom:'20%'
                    },
                    tooltip: {},
                    dataset: {
                        source: xcCharts
                    },
                    xAxis: {type: 'category',
                        axisLabel: {
                            interval:0,
                            rotate:"45",
                            textStyle:{
                                fontSize:8
                            }
                        },
                    },
                    yAxis: {},
                    series: [
                        {
                            type: 'bar',
                            barWidth: 20,
                            itemStyle:{
                                normal:{ color:'#31E917' }
                            }
                        },
                    ]
                })
            }
        },
        mounted(){
            this.init();

        },

        created() {
        },
    };
</script>

